<template>
<<<<<<< HEAD
  <div class='container'>试题录入</div>
</template>

<script>
export default {}
=======
  <div class="question-container">
    <!-- 整体卡片 -->
    <el-card class="question-card">
      <div slot="header" class="clearfix">
        <span>{{ paramsInput.type ? '试题修改' : '试题录入' }}</span>
      </div>
      <!-- 试题录入表单部分 -->
      <!-- 学科 -->
      <el-form ref="questionFormRef" :model="questionForm" :rules="questionFormrules" label-width="80px">
        <el-form-item label="学科 :" prop="subjectID">
          <el-select class="city-input" v-model="questionForm.subjectID" placeholder="请选择" @change="subjectChange" size="medium" clearable>
            <el-option v-for="(item, index) in questionData.subjectName" :key="index" :label="item.subjectName" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <!-- 学科 end-->

        <!-- 目录 -->
        <el-form-item label="目录 :" prop="catalogID">
          <el-select class="city-input" v-model="questionForm.catalogID" placeholder="请选择" size="medium" clearable>
            <el-option v-for="(item, index) in questionData.directoryres" :key="index" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </el-form-item>
        <!-- 目录end -->
        <el-form-item label="企业 :" prop="enterpriseID">
          <el-select v-model="questionForm.enterpriseID" placeholder="请选择" size="medium" clearable>
            <el-option v-for="(item, index) in questionData.companys" :key="index" :label="item.company" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <!-- 城市选择 -->
        <el-form-item label="城市 :" prop="province">
          <el-select class="cityLeft" style="width: 130px;" v-model="questionForm.province" filterable @change="handleProvince">
            <el-option v-for="item in questionData.citySelect.province" :key="item" :label="item" :value="item"></el-option>
          </el-select>
          <el-select style="width: 130px;" v-model="questionForm.city" filterable>
            <el-option v-for="item in questionData.citySelect.cityDate" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <!-- 城市选择 -->

        <el-form-item label="方向 :" prop="direction">
          <el-select class="city-input" v-model="questionForm.direction" filterable>
            <el-option v-for="item in directionList" :key="item.id" :value="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题型 :">
          <el-radio-group v-model="questionForm.questionType">
            <el-radio label="1">单选</el-radio>
            <el-radio label="2">多选</el-radio>
            <el-radio label="3">简答</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度 :">
          <el-radio-group v-model="questionForm.difficulty">
            <el-radio label="1">简单</el-radio>
            <el-radio label="2">一般</el-radio>
            <el-radio label="3">困难</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="题干 :" prop="question">
          <quill-editor style="width:715px" v-model="questionForm.question" :options="editorOption" />
        </el-form-item>
        <el-form-item label="选项 :" v-if="questionForm.questionType !== '3'">
          <question-option :questionForm="questionForm" :paramsInput="paramsInput" :newInfo="newInfo"></question-option>
        </el-form-item>
        <el-form-item label="解析视频 :" class="city-input">
          <el-input v-model="questionForm.videoURL"></el-input>
        </el-form-item>
        <el-form-item label="答案解析 :" prop="question">
          <quill-editor style="width:715px" v-model="questionForm.answer" :options="editorOption" />
        </el-form-item>
        <el-form-item label="题目备注 :" class="city-input">
          <el-input type="textarea" v-model="questionForm.remarks"></el-input>
        </el-form-item>
        <el-form-item label="试题标签 :">
          <el-select class="city-input" v-model="tags" filterable multiple>
            <el-option v-for="item in questionData.tagData" :key="item.id" :value="item.tagName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button v-if="!paramsInput.type" type="primary" @click="onQuestionSubmit">确认提交</el-button>
          <el-button v-else type="warning" @click="onQuestionSubmit">确认修改</el-button>
        </el-form-item>
      </el-form>
      <!-- 试题录入表单部分end -->
    </el-card>
  </div>
</template>

<script>
import QuestionOption from '../components/question-options'
import { list as subjectlist } from '../../api/hmmm/subjects'
import { simple as directorylist } from '../../api/hmmm/directorys'
import { list as companyslist } from '../../api/hmmm/companys'
import { list as taglist } from '../../api/hmmm/tags'
import { choice, add, list, detail } from '../../api/hmmm/questions'
import { provinces, citys } from '@/api/hmmm/citys.js'
export default {
  name: 'QuestionNew',
  data() {
    return {
      questionData: {
        subjectName: [],
        directoryres: [],
        companys: [],
        citySelect: {
          province: [],
          cityDate: []
        },
        directionSel: [],
        tagData: []
      },
      optionBoolean: null,
      subjectRan: '',
      tags: [],
      questionForm: {
        subjectID: '',
        catalogID: '',
        enterpriseID: '',
        province: '',
        city: '',
        direction: '',
        questionType: '1',
        difficulty: '1',
        question: null,
        options: [
          {
            code: 'A',
            title: '',
            img: '',
            isRight: false
          },
          {
            code: 'B',
            title: '',
            img: '',
            isRight: false
          },
          {
            code: 'C',
            title: '',
            img: '',
            isRight: false
          },
          {
            code: 'D',
            title: '',
            img: '',
            isRight: false
          }
        ],
        videoURL: '',
        answer: '',
        tags: '',
        remarks: ''
      },
      questionFormrules: {
        subjectID: [{ required: true, message: '请选择学科', trigger: 'blur' }],
        catalogID: [{ required: true, message: '请选择目录', trigger: 'blur' }],
        enterpriseID: [{ required: true, message: '请选择企业', trigger: 'blur' }],
        province: [{ required: true, message: '请选择企业地区', trigger: 'blur' }],
        direction: [{ required: true, message: '请选择企业目录', trigger: 'blur' }],
        question: [{ required: true, message: '请选择输入题干', trigger: 'blur' }]
      },

      directionList: [
        {
          value: '选项1',
          label: 'o2o'
        },
        {
          value: '选项2',
          label: '外包服务'
        },
        {
          value: '选项3',
          label: '企业服务'
        },
        {
          value: '选项4',
          label: '互联网金融'
        },
        {
          value: '选项5',
          label: '企业咨询'
        },
        {
          value: '选项5',
          label: '互联网'
        },
        {
          value: '选项5',
          label: '电子商务'
        },
        {
          value: '选项5',
          label: '其他'
        }
      ], // 富文本编辑器
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
            [{ list: 'ordered' }, { list: 'bullet' }], //列表
            ['blockquote'], //引用，
            ['code-block', 'image', 'link'] //代码块,上传图片、上传视频
          ]
        }
      },
      paramsInput: {},
      newInfo: {}
    }
  },
  components: {
    QuestionOption
  },
  created() {
    this.questionInfo()
    this.paramsInput = this.$route.params
  },
  mounted() {
    if (this.paramsInput.type === 1) {
      this.valutaionForm()
    }
  },
  methods: {
    async questionInfo() {
      // 学科列表
      const subjectres = await subjectlist()
      console.log(subjectres)
      this.questionData.subjectName = subjectres.data.items

      // // 目录列表
      // const directoryres = await directorylist();
      // this.questionData.directoryres = directoryres.data.items;
      // 公司列表
      const companysres = await companyslist()
      this.questionData.companys = companysres.data.items
      // 获取省份
      this.questionData.citySelect.province = provinces
      // console.log(provinces());
      // 获取方向
      const questionsderict = await choice()
      console.log(questionsderict)
      this.questionData.directionSel = questionsderict.data.items
      // 问题列表
      const listques = await list()
      console.log(listques)
    },
    // 选省获取到市
    handleProvince(e) {
      console.log(e)
      this.questionData.citySelect.cityDate = citys(e)
      this.questionForm.city = this.questionData.citySelect.cityDate[0]
    },
    // 提交表单
    onQuestionSubmit() {
      console.log(this.questionForm)
      if (
        this.$refs.questionFormRef.validate(async vaile => {
          if (vaile) {
            const submit = await add(this.questionForm)
            console.log(submit)
            this.$message.success('添加成功')
            this.$router.push('/questions/list')
          }
        })
      )
        console.log(this.questionForm)
    },
    async subjectChange(val) {
      this.questionForm.catalogID = ''
      this.questionData.directoryres = ''
      console.log(val)
      // 目录列表
      const directoryres = await directorylist({ subjectID: val })
      console.log(directoryres)
      this.questionData.directoryres = directoryres.data
      // 获取标签
      const tagres = await taglist()
      this.questionData.tagData = tagres.data.items
    },
    async valutaionForm() {
      if (this.paramsInput.type === 1) {
        const { data } = await detail({ id: this.paramsInput.id })
        this.tags = JSON.parse(data.tags)
        this.questionForm = data
      }
    }
  },
  watch: {
    tags: function(val) {
      console.log(this.questionForm.tags)
      this.questionForm.tags = JSON.stringify(val)
      console.log(val)
    }
  }
}
>>>>>>> 99b581ad90efc8af6413e4097d13ec8f4855db58
</script>

<style scoped lang='less'></style>
